// ** React Imports
import { Fragment, useState, forwardRef } from 'react'
// ** Table Data & Columns
import { data, columnsFun, typeEnum } from './data'

// ** Third Party Components
import ReactPaginate from 'react-paginate'
import DataTable from 'react-data-table-component'
import { selectThemeColors } from '@utils'
import { ChevronDown } from 'react-feather'

// ** Reactstrap Imports
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  CardTitle,
  CardHeader,
} from 'reactstrap'
import Select from 'react-select'
import ApplyModal from './applyModal'
import WarnModal from './warnModal'

export default () => {
  const statusOptions = [
    { value: '1', label: '未处理' },
    { value: '2', label: '已处理' },
  ]
  // ** States
  const [currentPage, setCurrentPage] = useState(0)
  const [searchValue, setSearchValue] = useState('')
  const [filteredData, setFilteredData] = useState([])
  const [applyShow, setApplyShow] = useState(false) // 申请类型
  const [warnShow, setWarnShow] = useState(false) // 告警类型

  // ** Function to handle Modal toggle
  // const handleModalShow = () => setModalShow(!modalShow)

  // ** Function to handle filter
  const handleFilter = (e) => {
    const value = e.target.value
    let updatedData = []
    setSearchValue(value)

    const status = {
      1: { title: 'Current', color: 'light-primary' },
      2: { title: 'Professional', color: 'light-success' },
      3: { title: 'Rejected', color: 'light-danger' },
      4: { title: 'Resigned', color: 'light-warning' },
      5: { title: 'Applied', color: 'light-info' },
    }

    if (value.length) {
      updatedData = data.filter((item) => {
        const startsWith =
          item.full_name.toLowerCase().startsWith(value.toLowerCase()) ||
          item.post.toLowerCase().startsWith(value.toLowerCase()) ||
          item.email.toLowerCase().startsWith(value.toLowerCase()) ||
          item.age.toLowerCase().startsWith(value.toLowerCase()) ||
          item.salary.toLowerCase().startsWith(value.toLowerCase()) ||
          item.start_date.toLowerCase().startsWith(value.toLowerCase()) ||
          status[item.status].title
            .toLowerCase()
            .startsWith(value.toLowerCase())

        const includes =
          item.full_name.toLowerCase().includes(value.toLowerCase()) ||
          item.post.toLowerCase().includes(value.toLowerCase()) ||
          item.email.toLowerCase().includes(value.toLowerCase()) ||
          item.age.toLowerCase().includes(value.toLowerCase()) ||
          item.salary.toLowerCase().includes(value.toLowerCase()) ||
          item.start_date.toLowerCase().includes(value.toLowerCase()) ||
          status[item.status].title.toLowerCase().includes(value.toLowerCase())

        if (startsWith) {
          return startsWith
        } else if (!startsWith && includes) {
          return includes
        } else return null
      })
      setFilteredData(updatedData)
      setSearchValue(value)
    }
  }

  // ** Function to handle Pagination
  const handlePagination = (page) => {
    setCurrentPage(page.selected)
  }

  // ** Custom Pagination
  const CustomPagination = () => (
    <ReactPaginate
      previousLabel=""
      nextLabel=""
      forcePage={currentPage}
      onPageChange={(page) => handlePagination(page)}
      pageCount={
        searchValue.length
          ? Math.ceil(filteredData.length / 7)
          : Math.ceil(data.length / 7) || 1
      }
      breakLabel="..."
      pageRangeDisplayed={2}
      marginPagesDisplayed={2}
      activeClassName="active"
      pageClassName="page-item"
      breakClassName="page-item"
      nextLinkClassName="page-link"
      pageLinkClassName="page-link"
      breakLinkClassName="page-link"
      previousLinkClassName="page-link"
      nextClassName="page-item next-item"
      previousClassName="page-item prev-item"
      containerClassName="pagination react-paginate separated-pagination pagination-sm justify-content-end pe-1 mt-1"
    />
  )

  const handleDeal = (value) => {
    if (value == Object.keys(typeEnum)[0]) {
      // 申请类型
      setApplyShow(true)
    } else {
      setWarnShow(true)
    }
  }

  const closeModal = () => {
    setApplyShow(false)
    setWarnShow(false)
  }

  return (
    <Fragment>
      <Card>
        <CardHeader className="flex-md-row flex-column align-md-items-center align-items-start border-bottom">
          <CardTitle tag="h4">事务列表</CardTitle>
        </CardHeader>
        <Row className="mx-0 mb-50">
          <Col className="d-flex align-items-center  mt-1" md="10" sm="12">
            <Input
              className="dataTable-filter"
              type="text"
              id="search-input"
              placeholder="输入标题"
              value={searchValue}
              onChange={handleFilter}
              style={{ width: '40%', marginRight: '20px' }}
            />
            <Select
              theme={selectThemeColors}
              className="react-select"
              classNamePrefix="select"
              options={statusOptions}
              isClearable={true}
              placeholder="选择消息状态"
            />
            <Button className="ms-2" color="primary">
              <span className="align-middle ms-50">搜索</span>
            </Button>
          </Col>
        </Row>
        <div className="react-dataTable react-dataTable-selectable-rows">
          <DataTable
            noHeader
            pagination
            columns={columnsFun(handleDeal)}
            paginationPerPage={7}
            className="react-dataTable"
            sortIcon={<ChevronDown size={10} />}
            paginationComponent={CustomPagination}
            paginationDefaultPage={currentPage + 1}
            data={searchValue.length ? filteredData : data}
          />
        </div>

        <ApplyModal show={applyShow} handleModalShow={closeModal}></ApplyModal>
        <WarnModal show={warnShow} handleModalShow={closeModal}></WarnModal>
      </Card>
    </Fragment>
  )
}
